<template>
  <div class="CommentPanel">
    <div class="reform">
      <form @submit.prevent="submit" ref="regform" :model='reForm'>
      <input @blur="focusState = false" v-focus="focusState" type="text" disabled v-model='reForm.fromName' placeholder="Name：" class="replyinput"  required="required" pattern="^[\u4E00-\u9FA5A-Za-z]{3,8}" oninvalid="setCustomValidity('输入3-8位中英文昵称！')" oninput="setCustomValidity('')"/>
      <input type="email" v-model='reForm.email' style="float:right" disabled placeholder=" Emial：" required="required"  class="replyinput"/>
      <textarea required rows="4" v-model='reForm.content' placeholder="Comment：" class="replytextarea"/>
      <span><input type="text" ref="toName" v-model='reForm.toName' disabled='disabled' style="border:none;height:20px"></span>
      <button class="button is-danger" type="submit">Submit</button>
      </form>
    </div>
    <div v-show="loadShow">
      <Loding></Loding>
    </div>
    <div class="page" v-show="count > 10">
      <Paging :page-index="currentPage" :total="count" :page-size="pageSize"  @change="pageChange"></Paging>
    </div>
    <div v-for="data in Comments">
      <div class="comparaent">
        <div class="comheader">
          <span><i class="icon-comuser icon"></i> {{data.fromName}}</span> 
          <span @click="reply(data)" class="replybtn"><i class="icon-reply"></i> 回复</span>
          <span style="margin:0 20px"><i class="icon-time icon"></i> {{getDateTime(data.updateTime)}}</span>
        </div>
        <div class="comcontent">{{data.content}}</div>
        <div class="comchild" v-if="data.replys.length > 0">
          <div v-for="reply in data.replys">
            <div>
              <span><i class="icon-comuser icon"></i> {{reply.fromName}}</span>
              <span @click="reply1(reply,data.commentId)" class="replybtn"><i class="icon-reply"></i> 回复</span>
              <span style="margin:0 10px"><i class="icon-time icon"></i> {{getDateTime(reply.updateTime)}}</span>
            </div>
            <div class="replycontent"> @{{reply.toName}}: {{reply.content}}</div>          
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Paging from 'view/base/Page/Paging'
import Loding from 'view/base/Loading/Loading'
import { getComments, addReply, addComment } from 'api/comment'
export default {
  props: {
    comicsId: ''
  },
  data() {
    return {
      pageSize: 10, // 每页显示20条数据
      currentPage: 1, // 当前页码
      count: 0,
      focusState: false,
      queryParam: {paramId: 1},
      Comments: [],
      reForm: {},
      loadShow: true
    }
  },
  created() {
    if(JSON.parse(sessionStorage.getItem('u')) === null || JSON.parse(sessionStorage.getItem('u')).uid === undefined){
      alert("请先登录！")
      this.$router.push('/login')
    }else{
      this.reForm.email = JSON.parse(sessionStorage.getItem('u')).email
      this.reForm.fromName = JSON.parse(sessionStorage.getItem('u')).name
      this.queryParam.paramId = this.comicsId
      setTimeout(() => {
        this._getComments()
        this.loadShow = false
      }, 500)
    }
  },
  methods: {
    _addComment(param) {
      addComment(param).then(res => {
        if (res.code === 0) {
          this.$alert('评论成功！等待后台审核！')
          this.reForm.content = ''
        }
      })
    },
    _addReply(param) {
      addReply(param).then(res => {
        if (res.code === 0) {
          this.$alert('评论成功！等待后台审核!')
          this.reForm.content = ''
        }
      })
    },
    _getComments() {
      getComments(this.queryParam).then(res => {
        this.Comments = res.data.content
        this.count = res.data.totalElements
      })
    },
    focusclick () {
      this.focusState = true
    },
    pageChange (page) {
      this.currentPage = page
      this.queryParam.page = page - 1
      this._getComments()
    },
    reply(data) {
      this.focusclick()
      this.reForm.commentId = data.commentId
      this.reForm.toName = this.$refs.toName.value = '@' + data.fromName
    },
    reply1(reply, id) {
      this.focusclick()
      this.reForm.commentId = id
      this.reForm.toName = this.$refs.toName.value = '@' + reply.fromName + ' '
    },
    submit () {
      if (this.reForm.content.length > 10) {
        this.reForm.commenterId = JSON.parse(sessionStorage.getItem('u')).uid        
        if (this.reForm.hasOwnProperty('toName')) {
          this.reForm.toName = this.reForm.toName.replace(/[@]/g, '')
          this._addReply(this.reForm)
        } else {
          this.reForm.comicsId = this.comicsId
          console.log(this.reForm.comicsId)
          this._addComment(this.reForm)
        }
      } else {
        this.$alert({ title: '错误', content: '评论内容不能少于10个字符！' })
      }
    }
  },
  components: {
    Paging,
    Loding
  },
  directives: {
    focus: {
      update: function (el, {value}) {
        if (value) {
          el.focus()
        }
      }
    }
  }
}
</script>

<style scoped lang="stylus" rle="stylesheet/stylus">
input:disabled
  background-color #fff
  color #ff3860
.input.is-danger,.textarea.is-danger{border-color:#ff3860}
.button.is-danger
  background-color #ff3860
  border none
  color #fff
  float right
  margin-right 4px
.button:hover
  font-size 13px
  cursor pointer
.valid
  border:2px solid red
  border-color:#ff3860
.reform
  padding 0 
  margin 0
  box-shadow 1px 1px 2px #E1E1E1
  margin-bottom 30px
.replytextarea
  width 99%
  border none
  outline none
  resize none
  font-size 14px
  color rgba(0,1,0,0.6)
.replyinput
  outline none
  padding 0
  border none
  width 50%
  height 20px
  border-bottom 1px dashed #E1E1E1
  color rgba(0,1,0,0.6)
input[type="text"]:focus
  border-bottom 1px dashed #87CEFA
input[type="email"]:focus
  border-bottom 1px dashed #87CEFA
.CommentPanel
  font-size: 14px
  margin: 30px
.comparaent
  box-shadow 1px 1px 3px #E1E1E1
  padding 8px 0
  margin 12px 0 12px 0
.comheader
  width 100%
.comcontent
  font-size: 14px
  margin 4px 5px 9px 10px
  color rgba(0,0,0,0.4)
.replycontent
  font-size: 13px
  margin 3px 3px 6px 10px
  color rgba(0,0,0,0.4)
.comchild
  margin 0 12px
  padding 2px 3px
  box-shadow 1px 0px 2px #E1E1E1
.replybtn
  cursor pointer
  float right
  width 50px
.replybtn:hover
  color #f56c6c
  font-size 14.5px
.icon
  font-size 16px
  margin 4px
.page
  display:flex
  justify-content:center
@media (max-width: 480px){
.CommentPanel{
  font-size: 12.5px;
  margin: 20px;
}
}
@media (max-width: 648px){
.replyinput{
  padding: 0;
  border: none;
  width: 50%
  border-bottom: 1px dashed #E1E1E1
}
.replytextarea{
  width:98%;
  border: none 
}
}
</style>
